<template>
  <div>
    <preHeader></preHeader>
    <div class="top-block"></div>
    <div id="feedback">
      <div v-for="(item,index) in fackList" class="item" @click="goDetail(item.id)">
        <div class="date">{{new Date(parseInt(item.time) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ')}}
        <span v-if='item.is_solve==1' class="backType">已解决</span>
        <span v-else class="waiting">待处理</span>
        </div>
        <span class="label">{{item.menuname}}</span><span class="labelAfter">{{item.submenuname}}</span>
        <i class="iconRight"><img src="../../assets/icon/iconright.png" alt=""></i>
      </div>
      <mt-button @click='goBack()'>去反馈</mt-button>
    </div>

  </div>
</template>

<script>
  import {get_problem_list} from '@/api/';
  export default {
    data() {
      return {
        tel:'',
        fackList:'',//反馈列表
      }
    },
    methods: {
      getFackList(){
        this.tel = JSON.parse(localStorage.getItem('tel'));
        get_problem_list({tel:this.tel}).then(res =>{
          console.log(res)
          this.fackList = res.data;
        })
      },
      goDetail(id) {
        this.$router.push('/backDetail?id=' + id);
      },
      goBack() {
        this.$router.push('/backPage');
      }
    },
    mounted() {
      this.getFackList();
    }
  }
</script>

<style scoped>
  .item {
    padding: 20px 0 1em 15px;
    border-bottom: 1px solid #ccc;
    position: relative;
  }

  .date {
    font-size: 16px;
    color: #333;
    padding-right: 2em;
  }

  .backType {
    color: #84cc62;
    font-size: 14px;
    float: right;
  }
  .waiting{float: right;font-size: 14px;color: #777;}
  .label {
    width: 62px;
    height: 16px;
    padding: 3px 0;
    background-color: #eff0f2;
    font-size: 12px;
    color: #2f3953;
    display: inline-block;
    border-radius: 3px;
    text-align: center;
    border: 1px solid #333;
    margin-top: 1em;
  }

  .labelAfter {
    font-size: 14px;
    color: #888;
    margin-left: 10px;
  }

  .iconRight {
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
  }

  .iconRight img {
    width: 8px;
  }

  .mint-button {
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: 2em;
    background-color: #2F3953;
    color: #fff;
    font-size: 14px;
    height: 30px;
  }
</style>
